<template>
  <div>
    <h1>个人介绍</h1>
    <div>姓名:{{name}}</div>
    <div>年龄:{{age}}</div>
    <div>职位:{{job}}</div>
    <div>性别:{{gender}}</div>
    <div>个人介绍:{{getUserInfo}}</div>
    <button @click="modifyUserInfo">修改信息</button>
    <button @click="resetUserInfo">重置用户信息</button>
    <button @click="patchUserInfo">批量修改</button>
  </div>
</template>

<script lang='ts'>
import {ref,reactive} from 'vue'
//导入userUsersStore
import useUsersStore from '../store/users'
import {storeToRefs} from 'pinia'
export default{
 setup(){
  //在setup函数中调用useUsersStore函数
  const store=useUsersStore()
  //使用storeToRefs将store数据变成响应式
  const {name,age,job,gender,getUserInfo}=storeToRefs(store)
  const modifyUserInfo=():void=>{
    //通过调用store中setUserInfo对于state状态中的相关变量来进行修改
    store.setUserInfo('周芷若',23,'峨嵋派掌门','女')
  }
  const resetUserInfo=():void=>{
    //调用store中的内置方法$reset，可以达到重置的目的
    store.$reset()
  }

  const patchUserInfo=():void=>{
    store.$patch({
        name:'宋远桥',
        age:67
    })
  }
  return{
    name,
    age,
    job,
    gender,
    getUserInfo,
    modifyUserInfo,
    resetUserInfo,
    patchUserInfo
  }
 }
}
</script>

<style lang='scss' scoped>
</style>